import PropTypes from 'prop-types'
import React, { Component } from 'react'

import { SideBar, Badge } from 'antd-mobile'
import styled from 'styled-components'
import classNames from 'classnames'

const Container = styled.div`
  & {
    display: flex;
    height: 100%;
    .side {
      flex: none
    }
    .content {
      flex: auto;
      &-page {
        height: 100%;
        display: none;
        justify-content: center;
        align-items: center;
        font-size: 32px;
        color: #cccccc;
        &.active {
          display: flex;
        }
      }
    }
  }
`

const tabs = [
  {
    key: 'key1',
    title: '前端',
    badge: Badge.dot
  },
  {
    key: 'key2',
    title: '后端',
    disabled: true
  },
  {
    key: 'key3',
    title: 'Linux',
  }
]
export class index extends Component {
  static propTypes = {}
  constructor(props) {
    super(props)
    this.state = {
      activeKey: 'key1',
    }
    this.setActiveKey = this.setActiveKey.bind(this)
  }
  setActiveKey(params) {
    if (params !== this.state.activeKey) {
      this.setState({
        activeKey: params
      })
    }
  }

  render() {
    return (
      <Container>
        <SideBar className='side' activeKey={this.state.activeKey} onChange={this.setActiveKey}>
          {tabs.map(item => (
              <SideBar.Item key={item.key} title={item.title} />
            ))}
        </SideBar>
        <div className='content'>
          <div className={classNames('content-page',this.state.activeKey === 'key1' && 'active')}>这是内容1</div>
          <div className={classNames('content-page',this.state.activeKey === 'key2' && 'active')}>这是内容2</div>
          <div className={classNames('content-page',this.state.activeKey === 'key3' && 'active')}>这是内容3</div>
        </div>
      </Container>
    )
  }
}

export default index